<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px 20px 0px 20px' }">
      <el-form ref="form" label-position="right" inline :model="requestFilter" label-width="100px" size="mini">
        <el-form-item label="EMPI号：">
          <el-input v-model="requestFilter.empiid"></el-input>
        </el-form-item>
        <el-form-item label="证件号码：">
          <el-input v-model="requestFilter.idnumber"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="requestFilter.name"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select v-model="requestFilter.sex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input v-model="requestFilter.homephonenumber"></el-input>
        </el-form-item>
        <el-form-item label="卡类型：">
          <el-input v-model="requestFilter.sex"></el-input>
        </el-form-item>
        <el-form-item label="卡号：">
          <el-input v-model="requestFilter.sex"></el-input>
        </el-form-item>
        <el-form-item label="病历号：">
          <el-input v-model="requestFilter.sex"></el-input>
        </el-form-item>
        <el-form-item style="padding-left: 40px">
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button>清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="always" style="margin-top: 10px">
      <el-table
        :data="patientList.list"
        v-loading="listLoading"
        stripe
        size="mini"
        height="620"
        style="width: 100%">
        <el-table-column
          prop="empiid"
          label="EMPI号" width="250"
        >
        </el-table-column>
        <el-table-column
          prop="patientid"
          label="患者标识"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          width="100"
          label="姓名">
        </el-table-column>
        <el-table-column
          label="证件类型">
        </el-table-column>
        <el-table-column
          prop="idnumber"
          width="180"
          label="证件号码">
        </el-table-column>
        <el-table-column
          width="60"
          label="性别">
          <template slot-scope="scope">{{ scope.row.sex == '1' ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column
          prop="dateofbirth"
          label="出生日期">
        </el-table-column>
        <el-table-column
          prop="medicalrecordNo"
          label="住院病历号">
        </el-table-column>
        <el-table-column
          label="门诊病历号">
        </el-table-column>
        <el-table-column
          prop="businessphonenumber"
          label="联系电话">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button @click="showDetail(scope.row)" type="text" size="small">详细信息</el-button>
            <el-button @click="showRel(scope.row.empiid)" type="text" size="small">相关记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="requestFilter.pageIndex" :page-size.sync="requestFilter.pageSize"
        :page-sizes="[10,20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="fetchData"
        @size-change="fetchData"
        :total="patientList.total">
      </el-pagination>
    </el-card>
    <el-dialog :visible.sync="dialogPatientDetail">
      <detail :patient="current_patient"></detail>
    </el-dialog>
    <el-dialog :visible.sync="dialogPatientRel">
      <el-table
        :data="patientRelList"
        v-loading="relListLoading"
        stripe
        size="mini"
        height="400"
        style="width: 100%">
        <el-table-column
          type="index"
          width="40">
        </el-table-column>
        <el-table-column
          prop="empiid"
          label="EMPI号" width="250"
        >
        </el-table-column>
        <el-table-column
          prop="patientid"
          width="100"
          label="患者标识"
        >
        </el-table-column>

        <el-table-column
          prop="patientinfoRaw.idnumber"
          width="160"
          label="证件号码">
        </el-table-column>
        <el-table-column
          prop="patientinfoRaw.name"
          width="80"
          label="姓名">
        </el-table-column>
        <el-table-column
          width="60"
          label="性别">
          <template slot-scope="scope">{{ scope.row.sex == '0' ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column
          prop="patientinfoRaw.systemname"
          width="60"
          label="来源">
        </el-table-column>
        <el-table-column
          prop="patientinfoRaw.pathientno"
          width="100"
          label="门诊病历号">
        </el-table-column>
        <el-table-column
          prop="patientinfoRaw.medicalrecordno"
          width="100"
          label="住院病历号">
        </el-table-column>

        <el-table-column
          prop="patientinfoRaw.businessphonenumber"
          width="100"
          label="电话号码">
        </el-table-column>
        <el-table-column
          prop="weight"
          label="匹配权重">
        </el-table-column>
        <el-table-column
          prop="fieldsname"
          width="160"
          label="匹配字段">
        </el-table-column>
        <el-table-column
          width="140"
          label="更新时间">
          <template slot-scope="scope"> {{ scope.row.createat| dateFormat }}</template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { patient } from '@/api/patient'
import Detail from '@/views/patient/detail'

export default {
  components: { Detail },
  data() {
    return {
      list: null,
      listLoading: false,
      requestFilter: {
        empiid: '',
        name: '',
        sex: '',
        idnumber: '',
        cardno: '',
        pageIndex: 1,
        pageSize: 10
      },
      patientList: {},
      dialogPatientDetail:false,
      current_patient:{},
      patientRelList:[],
      dialogPatientRel:false,
      relListLoading:false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      patient.getList(this.requestFilter).then(response => {
        this.patientList = response.data
        this.listLoading = false
      })
    },
    showDetail(obj){
      this.current_patient =  obj
      this.dialogPatientDetail = true
    },
    showRel(empiid){
      this.dialogPatientRel = true
      this.relListLoading = true
      patient.getRelList(empiid).then(resp =>{
        this.patientRelList = resp.data
        this.relListLoading = false
      });
    }
  }
}
</script>
